<template>
  <div class="banner">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <slot name="fimg"></slot>
        </div>
        <div class="swiper-slide">
          <slot name="simg"></slot>
        </div>
        <div class="swiper-slide">
          <slot name="timg"></slot>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
import "../assets/swipe/css/swiper.min.css";
import Swiper from "../assets/swipe/js/swiper.min.js";
export default {
  mounted() {
    var mySwiper = new Swiper(".swiper-container", {
      autoplay: 3000,
      autoplayDisableOnInteraction: false,
      loop: true,
      pagination: ".swiper-pagination",
      paginationClickable: true,
    });
  },
};
</script>

<style lang="scss" scoped>
.banner {
  width: 280px;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 20px;
  border-radius: 10px;

  img {
    border-radius: 10px;
    height: 120px;
  }
  .swiper-pagination {
    position: relative;
    top: -5px;
  }
}
</style>